<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<button id='up'>加速</button>
<button id='down'>减速</button>
<script >
    let VSHADER_SOURCE=`
    attribute vec4 a_position;
    uniform mat4 u_modelMatrix;
    void main(){
        gl_Position=u_modelMatrix*a_position;
    }`;
    let FSHADER_SOURCE=`
    void main(){
        gl_FragColor=vec4(1.0,0.3,0.0,1.0);
    }`;
    let ANGLE_STEP=45.0;
    function main(){
        let canvas=document.getElementById('mybox');
        let gl=getWebGLContext(canvas);
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let n=initVertexBuffers(gl);
        if(n<0){
            console.log('设置顶点位置失败');
            return;
        }
        gl.clearColor(0.0,0.0,0.0,1.0);
        let u_modelMatrix=gl.getUniformLocation(gl.program,'u_modelMatrix');
        if (!u_modelMatrix) { 
            console.log('Failed to get the storage location of u_ModelMatrix');
            return;
        }
        let currentAngle=0.0;
        let modelMatrix=new Matrix4();
        let tick=()=>{
            // 更新角度
            currentAngle=animate(currentAngle);
            // 清除，重新绘制
            draw(gl,n,currentAngle,modelMatrix,u_modelMatrix);
            // 在下一个合适的时刻调用
            requestAnimationFrame(tick,canvas);
        };
        tick();
    }

    function initVertexBuffers(gl){
        let vertices=new Float32Array([0, 0.5,   -0.5, 0.0,   0.5, 0.0]);
        let n=3;
        let vertexBuffer=gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0);
        gl.enableVertexAttribArray(a_position);
        return n;
    }

    function draw(gl,n,currentAngle,modelMatrix,u_modelMatrix){
        // modelMatrix.translate(0.35,0,0);
        modelMatrix.setRotate(currentAngle,0,0,1);
        gl.uniformMatrix4fv(u_modelMatrix,false,modelMatrix.elements);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES,0,n);
    }
    let g_last=Date.now();
    function animate(angle){
        let now=Date.now();
        let elapesd=now-g_last;
        g_last=now;
        let newAngle=angle+(ANGLE_STEP*elapesd)/1000.0;
        return newAngle%=360;
    }

    let up=document.getElementById('up');
    let down=document.getElementById('down');
    up.addEventListener('click',()=>{
        ANGLE_STEP+=10;
    });
    down.addEventlistener('click',()=>{
        ANGLE_STEP-=10;
    });
</script>

</body>
</html>